<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/yy-baseutils@1.2.0/dist/yy-baseutils.js"></script>
    <title>Document</title>
    <style>
        html,
        body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
        }
        .btn {
          width: 80px;
          height: 30px;
          border: 1px solid red;
          background: yellowgreen;
          line-height: 30px;
          text-align: center;
          font-weight: 700;
        }
        .btn-l {
          position: absolute;
          top: 10px;
          left: 10px;
          z-index: 999;
        }
        .btns {
          position: absolute;
          top: 10px;
          right: 200px;
          z-index: 999;
          display: flex;
        }
    </style>
</head>
<body>
<div class="btn btn-l" onclick="myExport('1')">分别导出</div>
<div class="btn btn-l" style="left: 100px" onclick="myExport('2')">
    导出
</div>
</body>
</html>
<!-- <script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.168.0/build/three.module.js",
      "GLTFLoader":"https://unpkg.com/three@0.168.0/examples/jsm/loaders/GLTFLoader.js",
      "MeshoptDecoder":"https://unpkg.com/three@0.168.0/examples/jsm/libs/meshopt_decoder.module.js",
      "OrbitControls":"https://unpkg.com/three@0.168.0/examples/jsm/controls/OrbitControls.js",
      "GLTFExporter":"https://unpkg.com/three@0.168.0/examples/jsm/exporters/GLTFExporter.js",
    }
  }

</script> -->
<script type="module">
    import * as THREE from "https://unpkg.com/three@0.126.0/build/three.module.js";
      import { GLTFLoader } from "https://unpkg.com/three@0.126.0/examples/jsm/loaders/GLTFLoader.js";
    import { MeshoptDecoder } from "https://unpkg.com/three@0.126.0/examples/jsm/libs/meshopt_decoder.module.js";
    import { OrbitControls } from "https://unpkg.com/three@0.126.0/examples/jsm/controls/OrbitControls.js";
    import { GLTFExporter } from "https://unpkg.com/three@0.126.0/examples/jsm/exporters/GLTFExporter.js";
    // import yyUtils from 'https://unpkg.com/yy-baseutils'
    // console.log("gollll",yyUtils)
    ///////////////////////////////////////////////////////////////////////////////////////////////
    // import * as THREE from "https://threejs.org/build/three.module.js";
    // import { GLTFLoader } from "https://threejs.org/examples/jsm/loaders/GLTFLoader.js";
    // import { MeshoptDecoder } from "https://threejs.org/examples/jsm/libs/meshopt_decoder.module.js";
    // import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
    // import { GLTFExporter } from "https://threejs.org/examples/jsm/exporters/GLTFExporter.js";
    //   import { VRMLLoader } from "https://threejs.org/examples/jsm/loaders/VRMLLoader.js";
    // import * as THREE from "../view/js/three/build/three.module.js";
    // import { GLTFLoader } from "../view/js/three/examples/jsm/loaders/GLTFLoader.js";
    // import { MeshoptDecoder } from "../view/js/three/examples/jsm/libs/meshopt_decoder.module.js";
    // import { OrbitControls } from "../view/js/three/examples/jsm/controls/OrbitControls.js";
    // import { GLTFExporter } from "../view/js/three/examples/jsm/exporters/GLTFExporter.js";


    var scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
    var renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      1000000
    );
    var controls = new OrbitControls(camera, renderer.domElement);
    // 如果使用animate方法时，将此函数删除
    controls.addEventListener("change", againRenderer);
    addLight(0, 200, 0, 0xffffff, 0.6);
    addLight(0, -200, 0, 0xffffff, 0.6);
    addLight(200, 0, 0, 0xffffff, 0.6);
    addLight(-200, 0, 0, 0xa29f9f, 0.6);
    addLight(0, 0, 200, 0xffffff, 0.6);
    addLight(0, 0, -200, 0x5e5c5c, 0.6);
    function addLight(x, y, z, color, intensity) {
      var directionalLight = new THREE.DirectionalLight(color, intensity);
      directionalLight.position.set(x, y, z);
      scene.add(directionalLight);
      directionalLight.castShadow = false;
    }

    const loader = new GLTFLoader();
    loader.setMeshoptDecoder(MeshoptDecoder);
    let group = new THREE.Group();
    let models = [],
      model = null;
    function getCaption(obj) {
      var index = obj.lastIndexOf("\/");
      obj = obj.substring(index + 1, obj.length);
      // console.log(obj);
      return obj;
    }

      myLoaders(loader, group);
    function myLoaders(loader, group) {
      loader.load("./宝马汽车小轿车.glb", (glb) => {
        // const object = getObject(glb);
        const object = glb.scene;
        group.add(object);
        models.push({
          obj: object,
          name: "bee",
        });
        scene.add(group);
          model = {
            obj: group,
            name: "hh.glb",
          };
          yyUtils.modelsUtils.getModelPosition(group, controls, 45)
      });
    }

    function getObject(object) {
      let arr = [];
      let group = new THREE.Group();
      console.log(object.scene);
      setScene(arr, object.scene);
      arr.forEach((i) => {
        removeMeshBasicMaterialAndLineSegments(i, object.scene, group);
      });
      return object.scene;
    }
    function setScene(arr, obj) {
      if (obj instanceof THREE.Mesh) {
        if (obj.material instanceof THREE.MeshBasicMaterial) {
          arr.push(obj);
          return;
        }
      }
      if (obj instanceof THREE.LineSegments) {
        arr.push(obj);
        return;
      }
      if (obj.children) {
        for (let i = 0; i < obj.children.length; i++) {
          setScene(arr, obj.children[i]);
        }
      }
    }
    function removeMeshBasicMaterialAndLineSegments(obj, scene, group) {
      if (obj.name === scene.name) {
        group.add(scene);
      } else if (scene.children) {
        for (let i = 0; i < scene.children.length; i++) {
          removeMeshBasicMaterialAndLineSegments(obj, scene.children[i], group);
        }
      }
    }
    function againRenderer() {
      //   requestAnimationFrame(againRenderer);
      renderer.render(scene, camera);
    }
    let gltfExporter = new GLTFExporter();

    window.myModelExport = function (type) {
      if (type == 1) {
        for (let i = 0; i < models.length; i++) {
          dowExports(models[i].obj, models[i].name);
        }
      } else {
        dowExports(model.obj, model.name);
      }
    };

    function dowExports(model, name) {
      gltfExporter.parse(model, function (result) {
        console.log(result);
        let link = document.createElement("a");
        link.style.display = "none";
        document.body.appendChild(link);
        link.href = URL.createObjectURL(
          new Blob([JSON.stringify(result)], { type: "text/plain" })
        );
        link.download = name;
        link.click();
        document.body.removeChild(link);
      });
    }
</script>
<script>
    function myExport(type) {
      window.myModelExport(type);
    }
</script>
